import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import moment from 'moment';
import React from 'react';

import { SingleDateC, SecondHeaderC, PrimaryC } from '../../comps';

class SingleDateCDemo extends React.Component {
  // eslint-disable-next-line no-useless-constructor
  constructor(props) {
    super(props);
  }

  query = () => {
    this.setState({});
  };

  render() {
    return (
      <div style={{ padding: '20px', width: '800px' }}>
        <SecondHeaderC title='年月日' />
        <SingleDateC
          form={this.props.form} // form对象
          title='日期选择' // 显示名称
          dataIndex='date1' // Form识别的下拉选项Item ID
          onChange={(e) => console.log(e)} // 时间变化事件
          initialValue={moment('2020-06-01')}
          disableBegin={moment('2020-01-01')}
          disableEnd={moment('2020-11-11')}
        />
        <SecondHeaderC title='禁选非银行间交易日/交易所交易日' />
        {/* 默认从当前年的开始进行禁用 */}
        <SingleDateC
          form={this.props.form} // form对象
          title='日期选择' // 显示名称
          dataIndex='date1' // Form识别的下拉选项Item ID
          onChange={(e) => console.log(e)} // 时间变化事件
          initialValue={moment(new Date()).add(-1, 'days')}
          disableEnd={moment()}
          useDisabledDate={{
            calendarType: 2, // {calendarType: 1}-交易所 {calendarType: 2}银行间
          }}
        />
        <PrimaryC title='查询' onClick={this.query} />
        <SecondHeaderC title='年月-value值就是YYYYY-MM' />
        <SingleDateC
          form={this.props.form} // form对象
          title='日期选择' // 显示名称
          dataIndex='date2' // Form识别的下拉选项Item ID
          onChange={(e) => console.log(e)} // 时间变化事件
          initialValue={moment('2023-01')}
          disableBegin={moment('2022-12')}
          disableEnd={moment('2023-06')}
          dataType='month'
        />
        <SecondHeaderC title='年月-value值就是YYYYY-MM-DD~YYYY-MM-DD' />
        <SingleDateC
          form={this.props.form} // form对象
          title='日期选择' // 显示名称
          dataIndex='date3' // Form识别的下拉选项Item ID
          onChange={(e) => console.log(e)} // 时间变化事件
          initialValue={moment('2023-01')}
          // disableBegin={moment('2022-12')}
          // disableEnd={moment('2023-06')}
          dataType='month'
          valueType='range'
        />
        <br />
      </div>
    );
  }
}

export default Form.create()(SingleDateCDemo);
